<template>
  <el-card class="box-card">
    <el-form :inline="true" ref="searchForm" :model="searchForm" class="demo-form-inline">
      <el-form-item label="用户名" prop="username">
        <el-input size="small"  clearable v-model="searchForm.username" placeholder="用户名"></el-input>
      </el-form-item>
      <el-form-item label="手机号" prop="phone">
        <el-input size="small"  clearable v-model="searchForm.phone" placeholder="手机号"></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-select size="small"  clearable v-model="searchForm.sex" placeholder="性别">
          <el-option label="-" value="-"></el-option>
          <el-option label="男" value="1"></el-option>
          <el-option label="女" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="date" >
      <el-date-picker
          size="small"
          style="width: 10px"
        v-model="searchForm.date"
          value-format="yyyy-MM-dd"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期">
        :picker-options="pickerOptions">
      </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearch">查询</el-button>
        <el-button type="primary" @click="resetSearch('searchFrom')">重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>
<template>
  <div>
    <el-card class="box-card">
      <el-button v-if="deIdisable" size="small" type="danger"  @click="deleteBatch"><i class="el-icon-delete">批量删除</i></el-button>
    <el-button size="small" type="success" @click="openDialog"><i class="el-icon-plus"></i>添加</el-button>

    </el-card>

    <el-card class="table-card">
      <el-table
          :data="tableData"
          @selection-change="handleSelectionChange"
          style="width: 100%">
        <el-table-column
            prop="id"
            label="编号"
            width="180">
        </el-table-column>
        <el-table-column>
          type="seletion"
          width="55"
        </el-table-column>
        <el-table-column
            prop="username"
            label="姓名"
            width="180">
        </el-table-column>
        <el-table-column
            prop="password"
            label="密码">
        </el-table-column>
        <el-table-column
            prop="avatar"
            label="头像">
          <template slot-scope="scope">
            <el-avatar shape="square" :size="50" :src="scope.row.avatar"></el-avatar>
          </template>
        </el-table-column>
        <el-table-column
            prop="phone"
            label="手机号">
        </el-table-column>
        <el-table-column
            prop="createTime"
            label="注册时间">
        </el-table-column>
        <el-table-column
            prop="money"
            label="余额">
        </el-table-column>
        <el-table-column
            prop="sex"
            label="性别">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageinfo.pageNum"
          :page-sizes="[3, 6, 9, 12]"
          :page-size="pageinfo.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageinfo.total">
      </el-pagination>
    </el-card>
<!--    添加表单-->
    <el-dialog title="dialogTtile" :visible.sync="userDialogVisible" width="500px">
        <el-form  ref="userForm" :model="userForm"  label-position="left" lable-width="80px">
          <el-form-item label="用户名" prop="username">
            <el-input size="small"  clearable v-model="userForm.username" placeholder="用户名"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input size="small"  clearable v-model="userForm.password" placeholder="密码 "></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="phone">
            <el-input size="small"  clearable v-model="userForm.phone" placeholder="手机号"></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="sex">
            <el-select size="small"  clearable v-model="userForm.sex" placeholder="性别">
              <el-option label="男" value="1"></el-option>
              <el-option label="女" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="余额" prop="money">
            <el-input size="small"  clearable v-model="userForm.money" placeholder="余额"></el-input>
          </el-form-item>
          <el-form-item label="生日"  prop="createTime" >
            <el-date-picker
              v-model="userForm.createTime"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="选择">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleForm"></el-button>
            <el-button type="primary" @click="reseqtUserDialog('userForm')">重置</el-button>
          </el-form-item>
        </el-form>

      </el-dialog>
  </div>
</template>

<script>
import {findUser} from "@/api/user";
export default {
  name: 'UserView',
  data() {
    return {
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        },
          {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      searchForm: {
        username: '',
        phone: '',
        sex: null,
        date: [],
        beginDate:null,
        endDate:null,
        pageSize:3,
        pageNum:1
      }
      ,
      tableData: [
      ],
      pageinfo: {
        pageNum: 1,
        pageSize: 3,
        total: null,
        pages: null
      },
      deIdisable:false,
      userDialogVisible: false,
      dialogTitle:"添加",

      userform:{
        id:null,
      }
    }
  },
  created() {
    this.fetchData()
  },
  computed:{
    deIdisable(){
      if(this.ids.length){
        return true
      }else {
        return  false
      }
    }
  },
  methods: {
    fetchData(){
      findUser(this.searchForm).then(res=>{})
      if(res.code !== 200){
        this.$message.warning(res.message)
      }else {
        this.$message.success("查询成功")
        this.tableData = res.data.list
        this.pageinfo.pageSize= res.data.pageSize
        this.pageinfo.total = res.data.total
        this.pageinfo.pageNum = res.data.pageNum
        this.pageinfo.pages = res.data.pages
      }
    },
    onSearch(){
      console.log('查询表单', this.searchForm)
      this.searchForm.beginDate = this.searchForm.date[0]
      this.searchForm.endDate = this.searchForm.date[0]
      console.log('查询表单', this.searchForm)
      this.fetchData( );
    },
    handleSelectionChange(row) {
      console.log('选中的行数', row)
      this.ids=[]
      row.map(item=>{
        this.deIdisable = item.id !== null
      })

    },
    //处理更新
    handleEdit(index, row) {
      console.log(index, row);
      this.dialogTitle = "修改"
      this.userDialogVisible = true
    },
    //处理删除
    handleDelete(index, row) {
      console.log(index, row);
    },
    resetSearch(formName) {
      this.$refs[formName].resetFields();
      this.fetchData();
    },
    handledateSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.searchForm.pageSize = val
      this.fetchData();
    },
    handleCurrentChange(val) {
      console.log(`第 ${val} 页`);
      this.searchForm.pageNum = val
      this.fetchData();
    },
    deleteBatch(){
      if(this.ids.length){
        this.$message.error("请选择要删除的行")
          return
      }
      this.$confirm('是否删除id为'+this.ids+'的数据', "提示",{
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteUser(this.ids).then(res=>{})
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    openDialog(){
      this.dialogTitle = "添加"
      this.userDialogVisible = true
    },
    handleForm(){
      if(this.dialogTitle.indexOf=="添加"){
        addUser(this.userform).then(res=>{
          if(res.code !== 200){
            this.$message.error("添加失败")

          }else {
            this.$message.success("添加成功")
            this.searchForm.pageNum = 1;
            this.fetchData()
          }
          this.userDialogVisible = false
        })
      }else {

      }
    },
    reseqtUserDialog(formName){
      this.$refs[formName].resetFields();
    }
  }
}
</script>
<style scoped>
.box-card {
  width: 100%;
  height: 70px;
  border-radius: 15px;
  margin-bottom: 10px;
}
.table-card {
  border-radius: 15px;
}
</style>